<script setup lang="ts">
import {ref} from 'vue';

const text = ref('这是一段超出隐藏文本');

/**
 * 改变文字
 * @param type
 */
const changeText = (type: 'less' | 'many') => {
  if (type === 'less') {
    text.value = '这是一段超出隐藏文本';
  } else {
    text.value = '这是一段超出隐藏文本,这是一段超出隐藏文本,这是一段超出隐藏文本,这是一段超出隐藏文本,这是一段超出隐藏文本,这是一段超出隐藏文本';
  }
}
</script>

<template>
  <el-button type="primary" @click="changeText('many')">内容变多</el-button>
  <el-button type="primary" @click="changeText('less')">恢复默认</el-button>
  <el-card class="card-box">
    <h4>使用text传参文本内容</h4>
    <div style="width: 200px">
      <dev-ellipsis-text :text="text"></dev-ellipsis-text>
    </div>
  </el-card>

  <el-card class="card-box">
    <h4>使用插槽传入文本内容</h4>
    <div style="width: 200px">
      <dev-ellipsis-text>{{ text }}</dev-ellipsis-text>
    </div>
  </el-card>

  <el-card class="card-box">
    <h4>文本超出两行隐藏</h4>
    <div style="width: 200px">
      <dev-ellipsis-text :lines="2">{{ text }}</dev-ellipsis-text>
    </div>
  </el-card>

</template>

<style scoped>
.card-box{
  margin-top: 20px;
}
</style>
